<template>
  <ContainerGroup>
    <Container>
      <FilterForm
        ref="filterForm"
        :elements="filterElements"
        :button-list="buttonList"
      />
    </Container>
    <Container height="fill" style="padding: 0px" scroll-y="true">
      <div class="sure-nopp">
        <span class="sure-btn" @click="surebtn">确认</span>
      </div>
      <div v-loading="departmentloading" class="department-box">
        <Empty v-if="allperpro.length === 0" style="margin: 20px auto" />
        <div
          v-for="(item, index) in allperpro"
          :key="index"
          :class="item.classErt"
          class="ment"
          @click="getInfor(item, index)"
        >
          <div class="ment-title">
            {{ item.name }} ({{ item.sex == "2" ? "女" : "男" }}{{ item.age }})
          </div>
          <div class="ment-content">
            <span
              v-if="item.consultationCode === '6'"
              class="emergency-treatment"
            >急诊</span>
            <span
              v-if="item.consultationCode !== '6'"
              class="outpatient-department"
            >门诊</span>
            <span
              v-if="item.preState === '4'"
              class="stayinbed-name"
            >待床</span>
            <span
              v-if="item.patientTag === '2'"
              class="youxian"
            >院前</span>
          </div>
          <div class="ment-details">
            <div class="letuer-title" style="color: #666666">
              <div style="color: #666666; float: left">
                收治医师:{{ item.predoctCode }}
              </div>
              <div style="text-align: right; color: #666666;float-right;">
                住院科室:{{ item.deptName }}
              </div>
            </div>
            <div class="letuer-title" style="color: #666666">
              <div style="text-align: center; color: #666666;float-right;">
                入院诊断:{{ item.diagName }}
              </div>
            </div>
            <div class="letuer-content">预约时间:{{ item.predate }}</div>
          </div>
        </div>
      </div>
      <div>
        <el-pagination
          v-if="total > 0"
          background
          layout="prev, pager, next"
          :pager-count="num"
          :total="total"
          :current-page.sync="pageInfo.pageNum"
          :page-size="pageInfo.pageSize"
          @current-change="sizeChange"
        />
      </div>
    </Container>
  </ContainerGroup>
</template>
<script>
import {
  getEemptyPatientListAll,
  getDeptList,
  addPatientBed
} from '../../utils/apis/registrationApi'
export default {
  name: 'Index',
  props: {
    bedData: Object,
    districtCodeList: String
  },
  data() {
    return {
      checkList: [], // 院区
      allperpro: [],
      tableLoading: false,
      num: 9,
      dialogVisible: false,
      departmentloading: true,
      total: 0,
      pageInfo: {
        pageNum: 1,
        pageSize: 12
      },
      drawerVisible: false,
      filterElements: [
        {
          key: 'dept',
          type: 'Select',
          label: '科室',
          value: '',
          options: []
        },
        {
          key: 'name',
          type: 'Input',
          label: '姓名',
          value: ''
        },
        {
          key: 'idcard',
          type: 'Input',
          label: '身份证',
          value: ''
        },
        {
          key: 'xingbie',
          type: 'Select',
          label: '性别',
          value: '',
          options: [
            {
              value: '1',
              label: '男'
            },
            {
              value: '2',
              label: '女'
            }
          ]
        }
      ],
      buttonList: [
        {
          label: '查询',
          type: 'primary',
          icon: 'search',
          handlerClick: this.getPerpro
        },
        {
          label: '重置',
          type: 'info',
          icon: 'reset',
          handlerClick: this.handlerReset
        }
      ],
      tableData: [],
      informet: {},
      newItem: {},
      bedItem: {},
      parms: {}
    }
  },
  created() {
    console.log(this.bedData)
  },
  mounted() {
    this.tableLoading = true
    this.getPerpro()
    setTimeout(() => {
      this.tableLoading = false
    }, 1500)
    this.getdatas()
  },
  methods: {
    getInfor(item, index) {
      this.allperpro.forEach((ele, i) => {
        if (i === index) {
          ele.classErt = 'colorNr'
        } else {
          ele.classErt = 'yuanNr'
        }
      })
      this.informet = item
      console.log(this.informet)
    },
    // 确定按钮
    surebtn() {
      //  this.bedData.sex 1 男 2 女
      if (this.informet.name) {
        const a = /(1052|1804|1051)+/
        if (this.informet.sex === '1' && a.test(this.bedData.deptCode)) {
          this.$message.error('男性病人不可以预约产科或妇科的床位请选择其他床位')
        } else {
          let content = ''
          if (
            this.bedData.sex !== this.informet.sex &&
          this.bedData.sex !== '3'
          ) {
            content =
            '<div style=' +
            'color:#FC9691;text-align:center;margin-bottom:10px;' +
            '>' +
            '当前床位为异性床位' +
            '</div>' +
            '<div>' +
            this.informet.name +
            '将分配至' +
            this.bedData.deptName +
            this.bedData.wardName +
            this.bedData.name +
            '床,确定此操作吗?' +
            '</div>'
          } else {
            content =
            '<p>' +
            this.informet.name +
            '将分配至' +
            this.bedData.deptName +
            this.bedData.wardName +
            this.bedData.name +
            '床,确定此操作吗?' +
            '</p>'
          }
          this.$confirm({
            content: content,
            title: '确认床位预约么',
            okFn: (res) => {
              const params = {
                bedId: this.bedData.bedNo,
                name: this.informet.name,
                patientId: this.informet.preid
              }
              addPatientBed(params).then((res) => {
                if (res.data.code === 200) {
                  this.$message.success(res.data.message)
                  this.getPerpro()
                  this.$parent.closeDrawer()
                // this.$parent.$parent.$parent.$parent.$parent.$parent.deawerhandleClose()
                } else {
                  this.$message.error(res.data.message)
                }
              })
            },
            cancelFn: (res) => {
              console.log('取消')
            }
          })
        }
      } else {
        this.$message.error('请先选择患者')
        return
      }
    },
    // 获取所有空床
    getdatas() {
      const parms = {
        districtCodeList: [this.districtCodeList]
      }
      getDeptList(parms).then((res) => {
        if (res.data.code === 200) {
          let dats = {
            label: '',
            value: ''
          }
          res.data.data.forEach((element) => {
            dats = {
              label: element.deptName,
              value: element.deptCode
            }
            this.filterElements[0].options.push(dats)
          })
        }
      })
    },
    // 获取空床全部人员
    sizeChange(data) {
      this.pageInfo.pageNum = data
      this.getPerpro(this.parms, 'page')
    },
    getPerpro(data, ispage) {
      this.departmentloading = true
      this.pageInfo.pageNum = ispage ? this.pageInfo.pageNum : 1
      this.parms = data
      let patientName = ''
      let sfzh = ''
      let age = ''
      let deptCode = ''
      let sexCode = ''
      let waitingBed = ''
      if (data) {
        patientName = data.name
        age = data.age
        deptCode = data.dept
        sexCode = data.xingbie
        sfzh = data.idcard
        waitingBed = data.stayInBed
      }
      const parms = {
        // bedId: this.bedOrdet.bedNo,
        sexCode: sexCode,
        deptCode: deptCode,
        patientName: patientName,
        sfzh: sfzh,
        isAll: true,
        isFilterYQ: true,
        pageNum: this.pageInfo.pageNum,
        pageSize: this.pageInfo.pageSize
      }
      getEemptyPatientListAll(parms).then((res) => {
        console.log('getEemptyPatientListAll')
        if (res.data.code === 200) {
          // this.allperpro = res.data.data.list;
          this.allperpro = []
          res.data.data.list.forEach((item) => {
            item.classErt = ''
            this.allperpro.push(item)
          })
          this.total = res.data.data.total
          console.log(this.total)
          this.departmentloading = false
        }
      })
    },
    format(percentage) {
      return percentage === 100 ? '100' : `${percentage}`
    },
    handleFun() {},

    pageChange(page) {
      console.log(page)
    },
    handlerEidt(row) {
      this.dialogVisible = true
    },
    handlerDetail(row) {
      console.log(row)
      this.drawerVisible = true
    },
    handerSearch(val) {
      console.log(val)
    },
    // 重置
    handlerReset() {
      this.$refs.filterForm.reset()
    },
    handlerDelete(row) {
      this.$confirm({
        content: '确定要删除该项吗？',
        title: '确认信息',
        okFn: (res) => {
          console.log(res)
        },
        cancelFn: (res) => {
          console.log('取消')
        }
      })
    },
    handlerDeleteAll(params) {
      console.log(this.$toast.warning('失败了'))
      // this.$toast.warning("成功了")
    },
    dialogConfirm() {
      console.log('ss')
    },
    drawConfirm() {
      console.log('drawer')
    },
    getSelectionItems(list) {
      console.log(list)
    }
  }
}
</script>
<style lang="less" scoped>
.sure-nopp {
}
.sure-btn {
  background-color: #71acfd;
  display: inline-block;
  padding: 5px 10px;
  color: #fff;
  font-size: 14px;
  margin: 10px 0 0 10px;
  border-radius: 5px;
  cursor: pointer;
}
.outpatient-department {
  width: 60px;
  height: 24px;
  background: #37c0cd;
  border: 1px solid #37c0cd;
  color: #ffffff;
  display: inline-block;
  border-radius: 4px;
  margin-right: 10px;
}
.youxian {
  width: 60px;
  height: 24px;
  background: #fc6161;
  border: 1px solid #fc6161;
  color: #ffffff;
  display: inline-block;
  border-radius: 4px;
}
.emergency-treatment {
  width: 60px;
  height: 24px;
  display: inline-block;
  background: #ffa712;
  border: 1px solid #f5b923;
  color: #ffffff;
  border-radius: 4px;
  margin-right: 10px;
}
.stayinbed-name {
  width: 60px;
  height: 24px;
  display: inline-block;
  background: #ddebff;
  color: #2b80ff;
  border: 1px solid #2b80ff;
  border-radius: 4px;
  margin-right: 10px;
}
.letuer-title {
  padding: 0 13px;
  box-sizing: border-box;
  overflow: hidden;
}
.letuer-square {
  margin-right: 7px;
}
.square-color-one,
.square-color-two,
.square-color-three {
  width: 17px;
  height: 17px;
  display: inline-block;
  margin: -3px 0;
}
.square-color-one {
  background-color: #71acfd;
}
.square-color-two {
  background-color: #fc9691;
}
.square-color-three {
  background-color: #e5e5e5;
}
.letuer-content {
  margin-top: 10px;
  padding-left: 10px;
  color: #666666;
  text-align: center;
  box-sizing: border-box;
}
.ment-details {
  margin-top: 10px;
  font-size: 16px !important;
}
.progress {
  width: 68%;
  display: inline-block;
}
.ment-content {
  font-size: 16px !important;
  color: #888888;
  text-align: center;
}
.ment-title {
  font-size: 20px;
  font-weight: 600;
  padding: 12px 0;
  color: #555555;
  text-align: center;
}
.department-box {
  display: flex;
  padding-top: 10px;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 10px;
  background-color: #fff;
  width: 100%;
  // max-height: 100%;
  height: 50%;
  overflow-y: auto;
}
.ment {
  width: 288px;
  padding-bottom: 10px;
  box-sizing: border-box;
  margin: 8px 6px;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  // height: 100%;
  box-shadow: 0px 3px 3px 0px rgba(33, 101, 249, 0.09);
}
.ck-filter-form {
  display: flex;
  align-items: top;
  overflow: hidden;
  .form-item-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    .form-item {
      display: flex;
      align-items: center;
      margin: 3px;
      margin-right: 15px;
      .form-item-label {
        color: #909399;
        text-align: right;
        font-size: 16px;
        white-space: nowrap;
      }
    }
  }
  .right-btn-container {
    text-align: center;
    display: flex;
    padding-top: 5px;
    .form-item-btn {
      margin: 0px 3px;
    }
    .more-text {
      display: block;
      width: 50px;
      margin-top: 6px;
      //   color:@themColor;
      cursor: pointer;
      user-select: none;
    }
  }
}
.colorNr {
  border-color: #217dfa !important;
}
.yuanNr {
  border-color: #e5e5e5 !important;
}
</style>
<style lang="less">
.form-item-label {
  color: #909399;
  text-align: right;
  font-size: 16px;
  white-space: nowrap;
}
</style>
